<template>
  <div>
    <div style="width: 90%; margin: 20px auto 0">
      <div class="att">
        <el-form :inline="true" :model="queryDate" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" @click="add">新增</el-button>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="queryDate.value" placeholder="请输入查询内容" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="acc"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fanhui">返回</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        :data="
          renderData
        "
        border
      >
        <el-table-column label="标题" prop="title" />
        <el-table-column label="内容" width="500" prop="content" />
        <el-table-column label="图片" prop="images" align="center">
          <template slot-scope="scope">
            <div style="display: flex">
              <div v-for="(item, index) in scope.row.images" :key="index">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="'http://localhost:3002/' + scope.row.images[index]"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="time" width="200" align="center">
          <template slot-scope="scope">
            {{ new Date(scope.row.time).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column label="发布者" prop="admin.name" align="center" />
        <el-table-column label="操作" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="page"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import service from '../../api/news'
export default {
  name: 'News',
  data() {
    return {
      page: 1,
      limit: 5,
      count: 0,
      title: '',
      content: '',
      images: [],
      time: Number,
      admin: '',
      renderData: [],
      queryDate: {
        value: ''
      }
    }
  },

  mounted() {
    this.get()
  },
  methods: {
    get() {
      service.get({ page: this.page, limit: this.limit }).then((res) => {
        console.log(res)
        this.renderData = res.rows
        this.count = res.count
      })
    },
    handleSizeChange(size) {
      this.limit = size
      this.get()
    },
    handleCurrentChange(currentPage) {
      this.page = currentPage
      this.get()
    },
    fanhui() {
      this.get()
    },
    acc() {
      this.renderData = this.renderData.filter((item, index) => {
        if (
          item.content === this.queryDate.value ||
          item.title === this.queryDate.value
        ) {
          // console.log(this.renderData)
          return (this.renderData = item)
        }
      })
    },
    add() {
      console.log(1)
      this.$router.push('/news/add')
    },
    handleDelete(index, row) {
      console.log(index, row)
      console.log(row._id)
      service.deleOne(row._id).then(() => {
        this.get()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
